import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

import 'element-plus/es/components/message/style/css'//解决element-plus自动引入的message弹窗样式丢失问题
import 'element-plus/es/components/message-box/style/css'//解决element-plus自动引入的message-box提示框样式丢失问题
import router from './router'
import 'virtual:windi.css'
import ElementPlus from 'element-plus'
// import 'element-plus/theme-chalk/dark/css-vars.css'//暗黑模式样式
import '../src/styles/index.css'

//pinia实例化
import { createPinia } from 'pinia'
const pinia = createPinia()

//注册element-plus小图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//组件内部汉化
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
    locale: zhCn,
})

//自定义指令判断按钮权限
app.directive('has', {
    mounted(el, binding) {
        let values = binding.value//按钮的权限标识符
        let actionList = JSON.parse(window.sessionStorage.getItem('actionList') || '[]')
        //检查数组 actionList 是否包含特定的值 values
        let permissionButtobList = actionList?.includes(values)
        if (!permissionButtobList) {
            el.style.display = 'none'//隐藏元素
            el.remove(el)//移除元素
        }
    }
})

app.use(pinia).use(router).mount('#app')
